<template>
	<view class="pageItem">
		<view class="back iconfont" @click="goBackFun()">&#xe8b7;</view>
		<view class="videoItem" :style="'height:'+_height2+'px'">
			<view class="video_box">
				<view class="v_con">
					<swiper class="v_swiper" :current="current" :indicator-dots="false" :autoplay="false"
						:duration="200" :vertical="true" :circular="true" @change="videoChange">
						<block v-for="(item,index) in 3" :key="'v_'+index">
							<swiper-item class="v_s_box">
								<view class="video" :id="'videoContain'+index"></view>
							</swiper-item>
						</block>
					</swiper>
					<view class="tools">
						<view class="icon_box" @click="do_flow">
							<view class="iconfont icon" :class="flow_ids.includes(play.id) ? 'flow_color':''">&#xe6b4;
							</view>
							<view class="i_txt">{{play.follow}}</view>
						</view>
						<view class="icon_box" @click="do_col">
							<view class="iconfont icon" :class="col_ids.includes(play.id) ? 'col_color':''">&#xe6b3;
							</view>
							<view class="i_txt">{{play.col}}</view>
						</view>
						<view class="icon_box" @click="shareFun">
							<view class="iconfont icon">&#xe6b2;</view>
							<view class="i_txt">{{$t('use.share')}}</view>
						</view>
					</view>
					<view class="massage">
						<view class="name">{{show_pt(play)}}</view>
						<view class="msg">
							<label class="num">{{cur_episode.cur_num}}</label>{{$t('popular.episode')}}
							/{{$t('popular.total')}}<label class="num">{{max_enum}}</label>
						</view>
					</view>
					<view class="more_btn" @click="selectChange(true)">{{$t('popular.analecta')}}</view>
				</view>
			</view>
		</view>


		<view class="mask" :class="select_item ? 'mask_active':''">
			<view class="mask_item">
				<view class="mask_box_buttom look_item" :class="select_item ? 'mask_box_active_buttom':''">
					<view class="m_tit">
						<view class="iconfont close" @click="selectChange(false)">&#xe620;</view>
					</view>

					<view class="m_msg">
						<image class="m_m_img" :src="realUrl(play.logo)"></image>
						<view class="m_m_com">
							<view class="m_m_t1">
							
								{{show_pt(play)}}
							
							</view>
							<view class="m_m_t2">{{$t('popular.total')}} {{max_enum}}</view>
						</view>
						<view class="m_m_btn" :class="col_ids.includes(play.id) ? 'col_color':''" @click="do_col"><label
								class="iconfont tag">&#xe6b1;</label>{{$t('popular.chase')}}</view>
					</view>

					<view class="m_vol">
						<block v-for="(item,index) in episodeList" :key="'v_'+item.id">
							<block v-if="item.look">
								<view class="btn sub btn_look" @click="to_look(item)">
									{{$t('popular.vol')}}
									<label class="num">{{item.cur_num}}</label>
									<label class="iconfont look">&#xe6bb;</label>
								</view>
							</block>
							<block v-else-if="item.unlock == 1">
								<view class="btn sub btn_vip" @click="to_look(item)">{{$t('popular.vol')}}<label
										class="num">{{item.cur_num}}</label></view>
							</block>
							<block v-else-if="item.free_level == 0">
								<view class="btn sub" @click="to_look(item)">{{$t('popular.vol')}}<label
										class="num">{{item.cur_num}}</label></view>
							</block>
							<block v-else-if="item.free_level == 1 && userInfo.vip_level == 2">
								<view class="btn sub" @click="to_look(item)">{{$t('popular.vol')}}<label
										class="num">{{item.cur_num}}</label></view>
							</block>
							<block v-else>
								<view class="btn btn_vip" @click.stop="errChange(true,index,item)">
									{{$t('popular.vol')}}
									<label class="num">{{item.cur_num}}</label>
									<label class="iconfont vip">&#xe6ba;</label>
								</view>
							</block>


						</block>
					</view>

				</view>
			</view>
		</view>

		<view class="mask" :class="err_btn ? 'mask_active':''">
			<view class="mask_item">
				<view class="mask_box_center err_item" :class="err_btn ? 'mask_box_active_center':''">
					<view class="m_btn" @click.stop="errChange02(false)">{{$t('popular.episode_btn')}}</view>
				</view>
			</view>
		</view>

		<view class="mask" :class="pay_item ? 'mask_active':''">
			<view class="mask_item">
				<view class="mask_box_buttom pay_item" :class="pay_item ? 'mask_box_active_buttom':''">
					<view class="m_tit">
						<view class="tit">
							{{$t('popular.episode_tip1')}}
							<label class="red">{{$t('popular.episode_tip2')}}</label>
							{{$t('popular.episode_tip3')}}
						</view>
						<view class="iconfont close" @click="payChange(false)">&#xe620;</view>
					</view>
					<view class="m_msg">
						<view class="msg">
							{{$t('popular.balance')}}：
							<image class="bean" src="/static/other/bean.png" mode="widthFix"></image>
							<label class="num">{{userInfo.gold||'0.00'}}</label>
						</view>
					</view>
					<view class="card">
						<block v-for="(item,index) in payArr" :key="index">
							<view class="c_box c_b_vip" :class="pay_index== index ? 'c_box_s':''" v-if="item.cate == 0"
								@click="cardChange" :data-id="index">
								<view class="b_t1">{{item.price}}<label class="code">{{$t('popular.bean')}}</label>
								</view>
								<view class="b_t2">{{item.name}}</view>
								<view class="tip">{{$t('popular.vip')}}</view>
								<image class="vip_bg" src="/static/other/vip_card.png"></image>
							</view>
							<view class="c_box" :class="pay_index == index ? 'c_box_s':''" v-else @click="cardChange"
								:data-id="index">
								<view class="b_t1">{{item.price}}<label class="code">{{$t('popular.bean')}}</label>
								</view>
								<view class="b_t2">{{item.name}}</view>
							</view>
						</block>
					</view>

					<view class="footer">
						<view class="btn sub" @click="to_buy">{{$t('popular.pay_btn')}}</view>
					</view>

				</view>
			</view>>
		</view>

	</view>
</template>

<script>
	var previous = 0;
	import {
		mapState
	} from 'vuex';
	import helper from '@/common/helper.js';
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	import his_mix from '@/lib/mixin/his_mixin.js';
	
	export default {
		mixins: [lang_mix, his_mix],
		data() {
			return {
				id: 0,
				current: 0,
				autoPlay: true,
				episodeList: [{
					id: 0,
					free_level: 0,
					cur_num: 0,
					look: false
				}],
				play: {
					title: '',
					episode_num: '', //总集数
					follow: 0,
					col: 0,
				},
				flow_ids: [],
				col_ids: [],

				pay_index: '',
				e_index: 0,
				max_enum: 0,
				cur_episode: {
					id: 1,
					cur_num: 1,
					video: {
						url: ''
					},
					share_url: ''
				},
				viodeBox: '', //视频容器

				first: true,
				v_index: 0, //当前在视频数组的第几个

				play_url: '', //当前播放的链接
				T: '',
				_width: '',
				_height2: '',
				share_url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload',
				volArr: [{
						num: 1,
						look: true,
						vip: false
					}, {
						num: 2,
						look: false,
						vip: false
					}, {
						num: 3,
						look: false,
						vip: false
					},
					{
						num: 4,
						look: false,
						vip: false
					}, {
						num: 5,
						look: false,
						vip: false
					}, {
						num: 6,
						look: false,
						vip: true
					},
					{
						num: 7,
						look: false,
						vip: true
					}, {
						num: 8,
						look: false,
						vip: true
					}, {
						num: 9,
						look: false,
						vip: true
					},
					{
						num: 10,
						look: false,
						vip: true
					}
				],
				payArr: [
					{
						id: 1,
						price: 39,
						name: '本集'
					},
					{
						id: 2,
						price: 69,
						name: '本剧'
					},
				],
				select_item: false,
				err_btn: false,
				pay_item: false,
				video_url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
				kt_id:0
				
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(opt) {
			this.id = opt.id || 0;
			this.eid = opt.eid || 0;

			this.flow_ids = this.vuex.appInfo.flow_ids || [];
			this.col_ids = this.vuex.appInfo.col_ids || [];

			//获取窗口消息
			this._width = document.documentElement.clientWidth;
			this._height2 = document.documentElement.clientHeight;
		},
		mounted() {
			this.tcpBoxInit();
		},
		methods: {
			getFocus() {
				let url = this.site_url + 'api/auth/member/get_focus?vid=' + this.id;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.is_flow = res.data.is_flow - 0;
						this.is_col = res.data.is_col - 0;
					}

				})
			},
			do_flow() {
				if (!this.hasLogin) {
					this.login_modal();
					return false;
				}
				this.throttle(this.real_flow, 600)(this, 'throttle');
			},
			real_flow() {
				let url = this.site_url + 'api/auth/member/auto_flow?vid=' + this.play.id;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.is_flow = parseInt(res.data);
						if (this.is_flow) {
							this.play.follow++;
							this.flow_ids.push(this.play.id);
						} else {
							if (this.play.follow > 0) {
								this.play.follow--;
								let idx = this.flow_ids.indexOf(this.play.id);
								if (idx > -1) {
									this.flow_ids.splice(idx, 1);
								}
							}

						}

					}

				})
			},
			do_col() {
				if (!this.hasLogin) {
					this.login_modal();
					return false;
				}
				this.throttle(this.real_col, 600)(this, 'throttle');
			},
			login_modal() {
				uni.showModal({
					title: this.$t('system.tip'),
					content: this.$t('system.tip4'),
					success: (res) => {
						if (res.confirm) {
							this.$r('/pages/public/login', 'rel')
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			real_col() {
				let url = this.site_url + 'api/auth/member/auto_col?vid=' + this.play.id;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.is_col = parseInt(res.data);
						if (this.is_col) {
							this.play.col++;
							this.col_ids.push(this.play.id);
						} else {
							if (this.play.col > 0) {
								this.play.col--;
								let idx = this.col_ids.indexOf(this.play.id);
								if (idx > -1) {
									this.col_ids.splice(idx, 1);
								}
							}

						}
					}

				})
			},
			throttle(fn, delay) {
				let that = this;
				// 使用闭包返回一个函数并且用到闭包函数外面的变量previous
				return function() {
					var _this = this;
					var args = arguments;
					var now = new Date().getTime();
					if (now - previous > delay) {
						fn.apply(_this, args);
						previous = now;
					} else {
						that.showMsg(that.$t('system.tip28'), 800);
					}
				};
			},
			to_look(item) {
				console.log(item)
				this.throttle(this.real_look, 300)(item, this, 'throttle');
			},
			real_look(item, idx) {
				//todo 加载视频防盗链参数
				this.cur_episode = item;
				//改变视频索引
				this.v_index = this.episodeList.findIndex((vo) => {
					return vo.id === item.id;
				});
				//console.log( this.v_index)
				this.change_look();
				this.real_play();
				this.$forceUpdate();
			},
			change_look() {
				let list = this.episodeList.map((vo, index) => {
					if (index == this.v_index) {
						vo.look = true;
					} else if (vo.look == true) {
						vo.look = false;
					}
					return vo;
				});
				this.episodeList = list;
			},
			to_buy() {
				if (this.pay_index === '') {
					this.showMsg(this.$t('system.tip29'));
					return false;
				}
				if (!this.hasLogin) {
					this.login_modal();
					return false;
				}
				// let price = this.payArr[this.pay_index].price;

				// if (this.userInfo.gold < price) {
				// 	this.showMsg(this.$t('system.tip13'));
				// 	return false;
				// }
				this.throttle(this.real_buy, 800)(this, 'throttle');
			},
			real_buy() {
				
				
				let url = this.site_url + 'api/auth/order/play_buy_now';
				let info = this.payArr[this.pay_index];
				let params = {
					buy_info: JSON.stringify(info),
					play_id: this.play.id,
					e_id: this.kt_id,
				};
				uni.showLoading({
					mask: true
				});
				helper.Timer.start();

				this.areq(url, params, 'POST').then(res => {
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.showMsg(res.msg, 2000, true, 'success');
							if (info.cate == 0) {
								uni.$emit('auto_update');
								this.pay_item = false;
								this.initData();
							} else {
								this.pay_item = false;
								this.initData();
							}
						} else {
							this.showMsg(res.msg);
						}
					}, left_time);


				});

			},
			tcpBoxInit() {
				let that = this;
				// sdk引入有顺序
				let script1 = document.createElement("script");
				script1.type = "text/javascript";
				script1.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js";
				document.getElementsByTagName("head")[0].appendChild(script1);
				// 创建script标签，引入外部文件
				let script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js";
				document.getElementsByTagName("head")[0].appendChild(script);
				// 引入成功
				script.onload = function() {
					that.$nextTick(() => {
						that.initData();
					})
				};
				// 引入失败
				script.onerror = function() {
					console.log("js资源加载失败了");
				};
			},
			initData() {
				let url = this.site_url + 'api/index/play_detail?id=' + this.id;
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.play = res.data.play;
						let list = res.data.episode_list;
						this.episodeList = list.map((vo, index) => {
							if (index == 0) {
								vo.look = true;
							} else {
								vo.look = false;
							}
							return vo;
						});
						this.cur_episode = this.episodeList[this.v_index];
						this.max_enum = this.episodeList.length;
						this.vip_init();
						this.tcpalyer();

						if (this.hasLogin > 0) {
							this.getFocus();
							this.history_init();
						}
						this.$forceUpdate();
					}
				})
			},
			vip_init() {
				let url = this.site_url + 'api/index/vip_list';
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.payArr = [];
						
						for(let kk in res.data){
							let lang = this.$i18n.locale;
							if(lang == 'en'){
								res.data[kk]['name'] = res.data[kk]['name_en']
							}else if(lang == 'jp'){
								res.data[kk]['name'] = res.data[kk]['name_jp']
							}
							this.payArr.unshift(res.data[kk]);
						}
						// this.payArr = res.data;
						let play = {
							id: 0,
							cate: 5,
							name: this.$t('popular.this_series'),
							price:  this.userInfo.vip_level == 2  ? this.play.member_price : this.play.market_price
						};
						let ep = {
							id: 0,
							cate: 6,
							name: this.$t('popular.this_episode'),
							price: this.userInfo.vip_level == 2  ? this.cur_episode.vip_price : this.cur_episode.price
						};
						this.payArr.unshift(play, ep);
						this.$forceUpdate();
						//console.log(this.payArr);
					}
				})
			},
			tcpalyer() {
				if (this.eid > 0) {
					this.v_index = this.episodeList.findIndex(vo => {
						return vo.id == this.eid;
					});
				}
				let episode = this.episodeList[this.v_index];
				// console.log(episode.price)
				this.payArr[1].price =   this.userInfo.vip_level == 2 ? episode.vip_price : episode.price;
				this.kt_id = episode.id
			
				let url = episode.url;
				this.cur_episode = episode;
				this.change_look();
				this.real_play();
			},
			is_json(str) {
				try {
					// 尝试将字符串解析为JSON对象  
					const obj = JSON.parse(str);
					// 如果解析后的对象不是null，并且类型是对象或数组，则认为是有效的JSON  
					// 注意：这里仅作为示例，根据你的具体需求，你可能不需要检查类型  
					return obj && typeof obj === "object" && !Array.isArray(obj) || Array.isArray(obj);
				} catch (e) {
					// 如果解析过程中抛出错误，则认为不是有效的JSON  
					return false;
				}
			},
			async get_vod_key(id) {
				var promise = new Promise((resolve, reject) => {
					let requestTimer = setTimeout(() => {
						clearTimeout(requestTimer)
						requestTimer = null
						let url = this.site_url + 'api/auth/play/get_episode_key?id=' + id;
						this.areq(url).then(res => {
							if (res.code == 1) {
								resolve(res);
							} else {
								reject(res);
							}
						})

					}, 200)
				});
				return promise;
			},
			async real_play() {
				clearTimeout(this.T);
				this.T = '';
				//todo 增加获取防盗链
				let argstr = '';
				// if(this.cur_episode.file_id > 0){
				// 	let ret =  await this.get_vod_key(this.cur_episode.id);
				// 	if(ret.code == 1){
				// 		argstr = ret.data;
				// 	}
				// }
				//console.log(argstr)
				let url = this.cur_episode.url + argstr;				
				if (document.getElementById('player-container-id2')) {
					let video = document.getElementById("player-container-id2");
					document.getElementById("player-container-id2").remove();
					document.getElementById("videoContain" + this.current).appendChild(video);
					this.viodeBox.src(url)
				} else {
					let video = document.createElement("video");
					video.setAttribute("id", "player-container-id2");
					video.setAttribute('playsinline', true);
					video.setAttribute('webkit-playsinline', true);
					video.setAttribute('autoplay', true);
					document.getElementById("videoContain" + this.current).appendChild(video);
					//console.log(this._height2)
					this.viodeBox = TCPlayer('player-container-id2', {
						sources: [{
							src: url, // 播放地址
						}],
						licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1305021554_1/v_cube.license',
						width: this._width,
						height: this._height2
					});
				}

				let flag = 1;
				this.viodeBox.on('playing', (rs) => {
					flag++;
					if (flag <= 5) {
						// 做一些处理
						if (this.cur_episode.unlock < 1 && this.cur_episode.free_level == 1 && this.hasLogin ==
							false) {
							this.T = setTimeout(() => {
								this.viodeBox.pause();
								this.viodeBox.autoPlay = false;
								this.viodeBox.currentTime(0)
								this.pay_item = true;
							}, 2000)
						} else if (this.cur_episode.unlock == 0 && this.cur_episode.free_level == 1 && this
							.userInfo.vip_level != 2) {
							this.T = setTimeout(() => {
								this.viodeBox.pause();
								this.viodeBox.autoPlay = false;
								this.viodeBox.currentTime(0)
								this.pay_item = true;
							}, 2000)

						} else if (this.cur_episode.unlock == 0 && this.cur_episode.free_level == 2) {
							this.T = setTimeout(() => {
								this.viodeBox.pause();
								this.viodeBox.autoPlay = false;
								this.viodeBox.currentTime(0)
								this.pay_item = true;
							}, 2000);
						}
					}

				});

				this.loop_handle();
			},
			loop_handle() {
				if (this.cur_episode.unlock < 1 && this.cur_episode.free_level == 1 && this.hasLogin == false) {
					this.T = setTimeout(() => {
						this.viodeBox.pause();
						this.viodeBox.autoPlay = false;
						this.viodeBox.currentTime(0)
						this.pay_item = true;
					}, 2000)
		
				} else if (this.cur_episode.unlock < 1 && this.cur_episode.free_level == 1 && this.userInfo.vip_level !=
					2) {
					this.T = setTimeout(() => {
						this.viodeBox.pause();
						this.viodeBox.autoPlay = false;
						this.viodeBox.currentTime(0)
						this.pay_item = true;
					}, 2000)

				} else if (this.cur_episode.unlock < 1 && this.cur_episode.free_level == 2) {
					this.T = setTimeout(() => {
						this.viodeBox.pause();
						this.viodeBox.autoPlay = false;
						this.viodeBox.currentTime(0)
						this.pay_item = true;
					}, 2000);
				} else {
					if (this.hasLogin) {
						// console.log('look_t');
						//视频看一分钟获得奖励
						let cdate = this.getCurrentDate();
						let his_date = uni.getStorageSync('sign_play_date');
						let look_t = this.vuex.appInfo.look_second || 30;

						// console.log(look_t);
						// console.log('cdate:' + cdate);
						// console.log('his_date:' + his_date);

						let otime = look_t * 1000;
						if (cdate != his_date) {
							this.T = setTimeout(() => {
								// console.log(445566)
								let url = this.site_url + 'api/auth/play/look_get_score?play_id=' + this
									.cur_episode.play_id;
								this.areq(url).then(res => {
									// console.log(res)
									if (res.code == 1) {
										uni.setStorageSync('sign_play_date', cdate);
									}

								})
							}, otime);
						}
						if (this.col_ids.includes(this.cur_episode.play_id)) {
							//设置追剧到集
							this.set_episode_look();
						}
					}
				}
			},
			set_episode_look() {
				let url = this.site_url + 'api/auth/member/set_episode_col';
				let param = {
					episode: JSON.stringify(this.cur_episode)
				};
				this.areq(url, param, 'POST').then(res => {

				})
			},
			getCurrentDate() {
				let now = new Date();
				let year = now.getFullYear(); // 获取完整的年份(4位,1970-????)  
				let month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart保证是两位数  
				let day = String(now.getDate()).padStart(2, '0'); // 获取当前月份的日期（1-31）  
				return `${year}${month}${day}`;
			},
			videoChange(e) {
				let next_current = this.current; //上一个块 index
				let now_current = e.detail.current; //当前块 index

				// console.log(this.episodeList)
				let v_len = this.episodeList.length;
				if ((next_current == 0 && now_current == 2) || (next_current == 1 && now_current == 0) || (next_current ==
						2 && now_current == 1)) {
					//上划
					let _v_i = this.v_index - 1; //判断当前之前还有没视频
					if (_v_i < 0) {
						this.v_index = v_len - 1;
					} else {
						this.v_index = _v_i;
					}
				}
				if ((next_current == 0 && now_current == 1) || (next_current == 1 && now_current == 2) || (next_current ==
						2 && now_current == 0)) {
					//上划 - 加
					let _v_i = this.v_index + 1; //判断当前之后还有没视频
					if (_v_i >= v_len) {
						this.v_index = 0;
					} else {
						this.v_index = _v_i;
					}
				}
				this.current = now_current;
				this.tcpalyer();
			},
			goBackFun() {
				this.backTo();
			},
			selectChange(_flag) {
				this.select_item = _flag;
			},
			errChange(_flag, idx = 0, item) {
				this.err_btn = _flag;
				console.log(this.payArr[1].price);
				console.log(item.price);
				// this.payArr[1].price = item.price;
				this.payArr[1].price = this.userInfo.vip_level == 2 ? item.vip_price : item.price;
				this.kt_id = item.id
				if (_flag) {
					this.select_item = false;
				} else {
					this.pay_item = true;
				}
				if (idx) {
					this.e_index = idx;
				}
			},
			errChange02(_flag, idx = 0) {
				this.err_btn = _flag;
				if (_flag) {
					this.select_item = false;
				} else {
					this.pay_item = true;
				}
				if (idx) {
					this.e_index = idx;
				}
			},
			payChange(_flag) {
				this.pay_item = _flag;
			},
			cardChange(e) {
				this.pay_index = e.currentTarget.dataset.id;
			},
			shareFun(e) {
				let that = this;
				this.share_url = this.site_url + 'h5/index.html#/pages/popular/shortDetail_h5?id=' + this.play.id;
				uni.showModal({
					title: this.$t('popular.link_promotion'),
					content: this.share_url,
					cancelText: this.$t('use.close'),
					confirmText: this.$t('use.copy'),
					confirmColor: '#23C74E',
					success(res) {
						if (res.confirm) {
							uni.setClipboardData({
								data: that.share_url,
								success(e) {
									uni.showToast({
										icon: 'success',
										title: ''
									})
								}
							})
						}
					}
				})
			},
			clickVideo(e) {
				let video = this.$refs[`video_${e.currentTarget.dataset.index}`];
				if (video[0].playing) {
					video[0].pause();
				} else {
					video[0].play();
				}
			}
		}
	}
</script>
<style>
	page {
		background: #000000;
	}
</style>
<style lang="scss">
	@import url('https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');

	.pageItem {
		padding: 0;
		padding-top: var(--status-bar-height);
	}

	.back {
		position: fixed;
		z-index: 98;
		font-size: 6vw;
		color: #fff;
		left: 0;
		top: calc(var(--status-bar-height) + 4vw);
		padding: 0 4vw;
	}

	.videoItem {
		width: 100vw;
		height: calc(100vh - var(--status-bar-height));
		position: fixed;
		z-index: 90;

		.video_box {
			width: 100%;
			height: 100%;

			.v_con {
				width: 100%;
				height: 100%;

				.v_swiper {
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 10;

					.v_s_box {
						width: 100%;
						height: 100%;
						position: relative;

						.video {
							width: 100%;
							height: 100%;
							position: relative;
							z-index: 10;
						}
					}
				}

				.tools {
					position: absolute;
					z-index: 15;
					width: 16vw;
					display: flex;
					flex-direction: column;
					align-items: center;
					bottom: 33vw;
					right: 1vw;

					.icon_box {
						width: 12vw;
						text-align: center;
						margin-top: 5vw;

						.icon {
							font-size: 9vw;
							color: #ffffff;
						}

						.i_txt {
							font-size: 24rpx;
							color: #ffffff;
							padding-top: 2rpx;
						}
					}
				}

				.massage {
					position: absolute;
					width: 50%;
					left: 4vw;
					bottom: 12vw;
					z-index: 20;
					color: #ffffff;

					.name {
						width: 100%;
						font-size: 4.3vw;
						padding: 1.5vw 0;
						@include text_over_style(1);
					}

					.msg {
						width: 100%;
						font-size: 3.4vw;
						margin-left: -1vw;
						@include text_over_style(1);

						.num {
							padding: 0 1vw;
						}
					}
				}

				.more_btn {
					max-width: 35%;
					min-width: 25%;
					padding: 0 2vw;
					position: absolute;
					z-index: 20;
					bottom: 12vw;
					right: 4vw;
					height: 10vw;
					line-height: 10vw;
					background: $main_color_s2;
					color: #fff;
					font-size: 4vw;
					border-radius: 6vw;
					text-align: center;
				}
			}
		}
	}

	@include animation_mask_style();

	.mask {
		.look_item {
			.m_tit {
				width: 100%;
				height: 7vw;
				line-height: 7vw;
				position: relative;

				.close {
					width: 6vw;
					text-align: right;
					position: absolute;
					right: 0;
					font-size: 4.3vw;
					color: $main_color5;
					font-weight: bold;
				}
			}

			.m_msg {
				width: 100%;
				padding: 1vw 0 3vw;
				display: flex;
				align-items: center;

				.m_m_img {
					width: 12vw;
					height: 16vw;
					border-radius: 1.5vw;
				}

				.m_m_com {
					flex: 1;
					padding: 0 4vw;

					.m_m_t1 {
						font-size: 4vw;
						color: $main_color5;
						font-weight: bold;
					}

					.m_m_t2 {
						font-size: 3.6vw;
						color: $main_color4;
						padding-top: 2vw;
					}
				}

				.m_m_btn {
					padding: 1.3vw 3vw;
					background: $main_color;
					color: $main_color5;
					border-radius: 2vw;
					font-size: 3.7vw;

					.tag {
						font-size: 3.6vw;
						padding-right: 2vw;
					}
				}
			}

			.m_vol {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				max-height: calc(80vh - 40vw);
				overflow: hidden;
				overflow-y: auto;

				.btn:not(:nth-child(3n+1)) {
					margin-left: 2%;
				}

				.btn {
					width: 32%;
					height: 12vw;
					line-height: 12vw;
					text-align: center;
					margin-top: 2vw;
					background: #f8f8f8;
					border-radius: 2vw;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color2;
				}

				.btn_look {
					background: $main_color2;
					color: $main_color;
					position: relative;

					.look {
						position: absolute;
						font-size: 2.5vw;
						color: $main_color;
						bottom: 2vw;
						right: 2vw;
						line-height: 2vw;
						font-weight: 400;
					}
				}

				.btn_vip {
					background: #FAF6F1;
					color: #CBB672;
					position: relative;

					.vip {
						position: absolute;
						font-size: 2.5vw;
						color: #FBF4F0;
						background: #CBB672;
						bottom: 0;
						right: 0;
						line-height: 2vw;
						padding: 1.5vw 2vw;
						border-radius: 2vw 0 2vw 0;
						font-weight: 400;
					}
				}

				.num {
					padding-left: 1vw;
				}
			}
		}

		.err_item {
			background: rgba(0, 0, 0, 0);
			display: flex;
			align-items: center;
			justify-content: center;

			.m_btn {
				min-width: 50vw;
				padding: 3vw 4vw;
				background: $main_color;
				color: #fff;
				font-size: 4.3vw;
				text-align: center;
				border-radius: 2vw;
			}
		}

		.pay_item {
			.m_tit {
				width: 100%;
				line-height: 5.5vw;
				position: relative;

				.tit {
					width: 90%;
					font-size: 4vw;
					color: $main_color5;
					font-weight: bold;

					.red {
						color: $main_color_s2;
					}
				}

				.close {
					width: 6vw;
					text-align: right;
					position: absolute;
					top: 0;
					right: 0;
					font-size: 4.3vw;
					color: $main_color5;
					font-weight: bold;
				}
			}

			.m_msg {
				width: 100%;
				padding-top: 2vw;

				.msg {
					font-size: 3.7vw;
					color: $main_color4;
					display: flex;
					align-items: center;

					.bean {
						width: 3.5vw;
					}

					.num {
						padding-left: 2vw;
						color: #FAAC10;
					}
				}
			}

			.card {
				width: 100%;
				margin: 2vw 0;
				max-height: calc(80vh - 50vw);
				overflow: hidden;
				overflow-y: auto;
				display: flex;
				flex-wrap: wrap;

				.c_box:not(:nth-child(2n+1)) {
					margin-left: 2%;
				}

				.c_box {
					width: 49%;
					height: 26vw;
					margin-top: 2vw;
					background: $main_color5;
					border-radius: 3vw;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;

					.b_t1 {
						font-size: 5vw;
						color: #222;
						font-weight: bold;
						position: relative;
						z-index: 2;

						.code {
							font-size: 3vw;
							margin-left: 1vw;
						}
					}

					.b_t2 {
						font-size: 3.2vw;
						color: $main_color;
						padding-top: 1vw;
						position: relative;
						z-index: 2;
					}
				}

				.c_b_vip {

					.b_t1,
					.b_t2 {
						color: #fff;
					}

					.tip {
						position: absolute;
						z-index: 3;
						left: 0;
						top: 0;
						font-size: 2.8vw;
						color: #fff;
						background: $main_color_s2;
						border-radius: 2vw 0 2vw 0;
						padding: 1vw 2vw;
					}

					.vip_bg {
						position: absolute;
						z-index: 1;
						width: 100%;
						height: 100%;
					}
				}

				.c_box_s {
					border: 1vw solid $main_color_s2;
				}
			}

			.footer {
				@include page_button();
				margin-top: 6vw;

				.btn {
					width: 100%;
					background: $main_color_s2;
				}
			}
		}
	}
</style>